<template>
  <div class="wrapper">
    <ul class="nav nav-tabs ur-nav-tabs2">
<!--       v-if="limits.indexOf(nav.limitsId)!=-1"-->
      <li class="nav-item" v-for="(nav,index) in navs" :key="index" @click="changeNav(nav)">
        <a class="nav-link" :class="{active:navActive==nav.id}"><i class="iconfont" :class="'icon-'+nav.icon"></i>{{nav.name}}</a>
      </li>
    </ul>
    <div :style="{'height':clientHeight-82+'px'}">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    components: {},
    props: {},
    data() {
      return {
        navActive:1,
        navs:[
          {id:1,url:'boxGroup',name:'控制箱',icon:'peidianxiang',limitsId:'2_04_01'},
          {id:2,url:'poleGroup',name:'灯杆',icon:'denggan',limitsId:'2_04_02'},
        ]
      }
    },
    watch: {},
    computed: mapState({
      clientHeight:state=>state.comm.clientHeight,
      limits:state=>state.user.userInfo.limits
    }),
    methods: {
      changeNav(nav){
        this.navActive=nav.id
        this.$router.push({ path: nav.url})
      }
    },
    created() {
      // let url = this.$route.path.split('/')[2]
      let url=this.$route.path.split('/')
      for (let i = 0; i < this.navs.length; i++) {
        let v = this.navs[i]
        if (url.length == 2) {
          if (this.limits.indexOf(v.limitsId) != -1) {
            this.navActive = v.id
            this.$router.push({path: 'group/' + v.url})
            break
          }
        } else {
          if (v.url == url[2]) {
            this.navActive = v.id
            this.$router.push({path: v.url})
          }
        }
      }
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .groupList{
    li{position :relative;width:320px;height: 170px;background :rgba(0,119,255,0.2);border: 1px solid #0099ff;margin:0 20px 20px 0;
      &:first-child{text-align:center;
        i{display:inline-block;transform:rotate(45deg);font-size:80px;color:#07277A;margin-top:40px;}
      }
      .group-item-main{margin-top:35px;
        .text{ font-size:16px;line-height:25px;}
        .group_btn{width:156px;height:36px;background: rgba(0,0,0,0.2); border: 1px solid #0099ff;color:#f2f2f2;}
      }
    }
  }
</style>
